
<template>
  <div class="file-select-root">
    <a-spin class="file-select-spin" :loading="loading" tip="This may take a while...">
      <div class="upload-part">
        <a-upload action="/" :auto-upload="false" :limit="1" v-model:file-list="consoleStore.consoleFiles"
          @before-upload="beforeLogUpload" @before-remove="onBeforeRemoveConsole" accept=".json">
          <template #upload-button>
            <a-button>
              选择 Console 日志
            </a-button>
          </template>
        </a-upload>
      </div>
      <div class="upload-part">
        <a-upload action="/" :auto-upload="false" :limit="1" v-model:file-list="networkStore.networkFiles"
          @before-upload="beforeNetworkUpload" @before-remove="onBeforeRemoveNetwork" accept=".json">
          <template #upload-button>
            <a-button>
              选择 Network 日志
            </a-button>
          </template>
        </a-upload>
      </div>
      <div class="upload-part">
        <video v-show="mediaSrc" ref="videoRef" class="video" autoplay controls></video>
        <a-upload action="/" :auto-upload="false" :limit="1" v-model:file-list="mediaStore.mediaFiles"
          @before-upload="beforeMediaUpload" @before-remove="onBeforeRemoveMedia" accept="video/*">
          <template #upload-button>
            <a-button>
              选择 Media 文件
            </a-button>
          </template>
        </a-upload>
      </div>
      <div class="analyze-part">
        <a-button type="primary" @click="onAnalyzeClicked">开始分析</a-button>
      </div>
    </a-spin>
    <div class="file-select-info-wrap">
      <a-descriptions class="file-select-info" :data="consoleInfo" :size="size" title="Console Info" :column="1" />
      <a-descriptions class="file-select-info" :data="networkInfo" :size="size" title="Network Info" :column="1" />
      <a-descriptions class="file-select-info" :data="mediaInfo" :size="size" title="Media Info" :column="1" />
      <div class="file-select-info"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useConsoleStore } from '@/store/console'
import { useNetworkStore } from '@/store/network'
import { useMediaStore } from '@/store/media'

import { useRouter } from "vue-router";
const router = useRouter();
const consoleStore = useConsoleStore();
const networkStore = useNetworkStore();
const mediaStore = useMediaStore();

const videoRef = ref()

const mediaSrc = ref()

const loading = ref(false)

//#region Console 日志
const beforeLogUpload = async (file) => {
  try {
    console.log('beforeLogUpload', file);
    consoleStore.addOriginConsole(file);
    return true;
  } catch (error) {
    console.error(error);
    return false;
  }
};
function onBeforeRemoveConsole() {
  return new Promise((resolve, reject) => {
    console.log('onBeforeRemoveConsole');
    consoleStore.clear();
    resolve(true)
  });
}
//#endregion

//#region Network 网络
const beforeNetworkUpload = async (file) => {
  try {
    networkStore.addNetworkFile(file);
    return true;
  } catch (error) {
    console.error(error);
    return false;
  }
};
function onBeforeRemoveNetwork() {
  return new Promise((resolve, reject) => {
    console.log('onBeforeRemoveNetwork');
    networkStore.clear();
    resolve(true)
  });
}
//#endregion

//#region Media 媒体
const beforeMediaUpload = async (file) => {
  try {
    const url = URL.createObjectURL(file);
    mediaSrc.value = url;
    console.log('mediaSrc', mediaSrc.value);
    videoRef.value.src = url;
    mediaStore.setMediaSrc(url)
    return true;
  } catch (error) {
    console.error(error);
    return false;
  }
};
function onBeforeRemoveMedia() {
  return new Promise((resolve, reject) => {
    console.log('onBeforeRemoveMedia');
    mediaSrc.value = ''
    videoRef.value.src = ''
    mediaStore.clear();
    resolve(true)
  });
}
//#endregion

/**
 * 开始分析数据
 */
function onAnalyzeClicked() {
  console.log('onAnalyzeClicked', consoleStore.consoleFiles);
  consoleStore.build()
  networkStore.build()
  mediaStore.setMediaSrc(mediaSrc.value)
  if (consoleStore.consoleFiles.length > 0)
    return router.push("/console")
  if (networkStore.networkFiles.length > 0)
    return router.push("/network")
  if (mediaSrc.value?.length > 0)
    return router.push("/media")
}
//#region 数据信息显示
const consoleInfo = ref([{
  label: 'Start Time',
  value: '',
}, {
  label: 'End Time',
  value: '',
}]);
const networkInfo = ref([{
  label: 'Start Time',
  value: '',
}, {
  label: 'End Time',
  value: '',
}]);
const mediaInfo = ref([{
  label: 'Start Time',
  value: '',
}, {
  label: 'End Time',
  value: '',
}, {
  label: 'Duration',
  value: '',
}]);
//#endregion
</script>
<style scoped lang="less">
@import url('./file-select.less');
</style>